<style lang="less" scoped>
@import './login.less';
</style>

<template>
  <div class="login">
    <div class="title-box">
      <h1>{{title}}</h1>
    </div>

    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" style="width:350px;height:300px;" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
        </div>
      </Card>
    </div>

    <div class="bottom-box">
      <span>Copyright ©2019 </span>|

      <span>推荐浏览器（360极速浏览器、谷歌浏览器、Edge for win10） </span>
    </div>
  </div>
</template>

<script>
import config from '@/config'
import LoginForm from '@component/login-form'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      title: config.title,
    }
  },
  components: {
    LoginForm,
  },
  methods: {
    ...mapActions(['handleLogin']),
    async handleSubmit({ userName, password }) {
      let user = { name: userName, password: password }
      await this.handleLogin(user)
      window.location.reload()
    },
  },
}
</script>

<style  scoped>
.title-box {
  position: absolute;

  top: 0px;
  left: 15px;
  width: 440px;
  text-align: center;
  height: 55px;
  line-height: 55px;
  display: inline-block;
}

.title-box h1 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  font-family: '黑体';
}

.bottom-box {
  position: absolute;
  bottom: 20px;
  color: #fff;
  text-align: center;
  width: 100%;
}

.bottom-box span {
  margin: 0 10px;
}
</style>
